
<template>
    <div class="common-layout">
      <el-container class="container-layout">
        <!-- 侧边菜单栏 -->
        <CommonAsider/>
        <el-container class="el-container">
            <!-- 顶部导航栏 -->
          <CommonHeader></CommonHeader>
              <!-- 面包屑 -->
              <CommonTab></CommonTab>
            <!-- 变化的内容 -->
          <el-main> 
              <router-view v-slot="{ Component }">
                <keep-alive >
                  <component :is="Component" />
                </keep-alive>
              </router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<script setup>
import { defineComponent } from 'vue';
import CommonHeader from '../components/CommonHeader.vue'
import CommonAsider from '../components/CommonAsider.vue'
import CommonTab from '../components/CommonTab.vue'

// defineComponent({
//     components:{
//         CommonHeader,
//         CommonAsider,
//         CommonTab
//     }
// })


</script>

<style lang="less">
.common-layout{
    height: 100%;
    & > .el-container{
        height: 100%;
        & > .el-aside{
            height: 100%;
            background: skyblue;
        }
    }

    .container-layout{
      flex-wrap: nowrap;
    }
}
.el-container {
    flex-wrap: wrap;
    align-items: flex-start;
}
</style>